﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>键盘事件</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div{
        	padding: 40px;
        }
       
    </style>
</head>
<body>

<input type="text" value=""  name="" id="j_text" />
<ul id="j_list"></ul>
<script type="text/javascript">

    window.onload=function(){
		 	/*
		 	 *  onkeydown: 键盘按键按下的时候触发
		 	 *  onkeyup: 键盘按键抬起的时候触发
		 	 *  event.keyCode：数字类型 键盘按键的值 ，也叫键值
		 	 *  功能键：ctrlKey shiftKey altKey ， 当一个事件发生的时候，如果 ctrlKey/shiftKey/altKey 是按下的状态，返回true，否则返回false
		 	 *  
		 	 * 
		 	 * */
			
			//获取键值
//		  	document.onkeydown = function(ev){
//		  		var ev = ev || event;
//		  		 alert(ev.keyCode);
//		  	}

			//功能键
//		  	document.onclick = function(ev){
//		  		var ev = ev || event;
//		  		 alert(ev.ctrlKey);
//		  	}
		  	
		  	//防qq实例
		  	
		  	var oText  = document.getElementById('j_text');
		  	var oUl = document.getElementById('j_list');
//		  	    oText.onkeydown = function(){  //在按下去的瞬间，onkeydown先执行了，所以获取到的是上一次按下的值,所以此类情况 ，使用onkeyup  更合适
//		  	    	alert(this.value);
//		  	    }
				
				oText.onkeyup = function(ev){ 
					var ev = ev || event;
					if(this.value !=''){
					//console.log(ev.keyCode);
						if(ev.keyCode == 13 && ev.ctrlKey ){
							var oLi = document.createElement('li');
								oLi.innerHTML = this.value;
								if(oUl.children[0]){
									oUl.insertBefore(oLi,oUl.children[0])
								}else{
									oUl.appendChild(oLi);
								}
						}
						
					}
					
				}
		  	
		}
</script>
</body>

</html>
